<template>
    <div class="media-center">
    <el-container>
        <el-aside width="240px" class="leftMain">
          <div class="main-title">{{ $t('目录管理') }}</div>
            <Tree showMinType="3" @click="handleTreeClick"></Tree>
        </el-aside>
        <el-main class="rightMain">
          <bs-main height="100%">
            <Condition :home="false" slot="header" @add="handelAddTemplate" @search="handleSearch"></Condition>
            <list
              height="calc( 100% - 15px )"
              ref="list"
              class="center"
              :showIndex="true"
              :table-tag="tableName"
              :list-data="mediaData"
              :has-select="false"
              :list-cols="listCols"
              :init-cols-props.sync="initColsProps"
              :init-headmune-flag="initHeadmuneFlag"
              :action-opts="actionOpts">
                <template slot="auditStateSlot" slot-scope="{ row }">
                  {{ row.auditState | auditStateFilter }}
                </template>
                <template slot="userListSlot" slot-scope="{ row }">
                  {{ row.userList | userListFilter }}
                </template>
                <template slot="lockStateSlot" slot-scope="{ row }">
                  {{ row.lockState | lockStateFilter }}
                </template>
                <template slot="deviceNumSlot" slot-scope="{ row }">
                  <el-link type="primary">查看</el-link>
                </template>
                <template slot="actionSlot" slot-scope="{ row }">
                    <el-button @click.native="handelAudit(row)" size="mini" type="primary" v-if="row.auditState == -2" v-has="'NEWS_NEWSPAGE_AUDIT'">送审</el-button>
                    <el-button @click.native="handelShowAudit(row)" size="mini" type="primary" v-if="row.auditState == 0" v-has="'NEWS_NEWSPAGE_AUDIT'">审核</el-button>
                    <el-button @click.native="handelEditNewsHome(row)" size="mini" type="primary" v-has="'NEWS_NEWSPAGE_UPDATE'">编辑</el-button>
                    <el-button @click.native="handelPreviewNewsHome(row)" size="mini">预览</el-button>
                    <el-button @click.native="handelRemoveNewsHome(row)" size="mini" type="danger" v-has="'NEWS_NEWSPAGE_DELETE'">删除</el-button>
                </template>
            </list>
            <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="false" :allChecked="allSize" @all="handleChangeAllSize" @pagination="doList"></pagination>
          </bs-main>
        </el-main>
    </el-container>
    <!-- 新闻编辑窗口 -->
    <NewsPageDiyDialog :visible.sync="showNewsDiyDialog" :type="pageType" :id="rowID" :folder="queryData.folderId" @close="doList"></NewsPageDiyDialog>
    <!-- 新闻审核 -->
    <NewsPageAuditDialog :visible.sync="showAuditDialog" :type="pageType" :id="rowID" :showForm="showForm" @audit="handelAuditPage"></NewsPageAuditDialog>
    <!-- 设置密码 -->
    <SetPasswordDialog :visible.sync="showSetPasswordDailog" :id="rowID" :home="false" @result="handelSetPassResult"></SetPasswordDialog>
  </div>
</template>

<script>
import NewsPageDiyDialog from './components/NewsPageDiyDialog.vue'
import NewsPageAuditDialog from './components/NewsPageAuditDialog.vue'
import SetPasswordDialog from '../../components/SetPasswordDialog.vue'
import Condition from '../home/components/Condition.vue'
import Tree from '../../components/NewsTree.vue'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import NewsApi from '@/api/news.js'

export default {
    data() {
        return {
            mediaData: [],
            tableName: 'NewsHomePageTable',
            listCols: [
                {label: '新闻名称', prop: 'name', minwidth: 100},
                {label: '签发状态', prop: 'auditState', minwidth: 80, slot: true},
                {label: '操作人', prop: 'userList', minwidth: 150, slot: true},
                {label: '编辑状态', prop: 'lockState', minwidth: 80, slot: true},
                {label: '操作时间', prop: 'lastModifiedAt', minwidth: 150},
                {label: '创建时间', prop: 'createdAt', minwidth: 150},
            ],
            initColsProps: ['name', 'auditState', 'userList', 'lockState', 'lastModifiedAt', 'createdAt'],
            actionOpts: {
                show: true,
                align: 'center',
                width: '270px',
                hidEditBtn: true,
                hidDelBtn: true,
                name: '操作',
                slot: true,
                fixed: "right"
            },
            initHeadmuneFlag: false,
            pageData: {
                page: 1,
                total: 0,
                limit: 15
            },
            queryData: {
                folderId: '0'
            },
            allSize: false,
            showNewsDiyDialog: false,
            showAuditDialog: false,
            showSetPasswordDailog: false,
            pageType: '1',
            rowID: '0',
            showForm: true
        }
    },
    components: {
        List, Pagination, Condition, Tree, NewsPageDiyDialog, NewsPageAuditDialog, SetPasswordDialog
    },
    mounted() {
        this.$nextTick(() => {
            this.doList({page:1})
        })
    },
    filters: {
        auditStateFilter(val) {
            let msg = ''
            // 审核状态(-3:全部 0:待审核 -1:审核不通过 1:审核通过 -2:待提审)
            switch(val) {
                case 0:
                    msg = '待审核'
                    break
                case -1:
                    msg = '审核不通过'
                    break
                case 1:
                    msg = '审核通过'
                    break
                case -2:
                    msg = '未送审'
                    break
            }
            return msg
        },
        userListFilter(val) {
            return val && val.join(',')
        },
        lockStateFilter(val) {
            // 锁定状态(0:未锁定 1:已锁定)
            let msg = ''
            switch (val) {
                case 0:
                    msg = '未锁定'
                break
                case 1:
                    msg = '已锁定'
                break
            }
            return msg
        }
    },
    methods: {
        // 查询列表
        async doList(current) {
            if(current) {
                this.pageData = {
                ...this.pageData,
                ...current
                }
            }
            var queryData = this.queryData
            queryData.current = this.pageData.page
            queryData.size = this.pageData.limit
            queryData.folderId = this.queryData.folderId
            const res = await NewsApi.newsPageList(queryData)
            if(res) {
                this.mediaData = res.records || []
                this.pageData.total = Number(res.total? res.total: 0)
            }
        },
        handleTreeClick(data) {
            this.queryData.folderId = data.id
            this.doList({page:1})
        },
        // 选择所有页
        handleChangeAllSize(val) {
            this.allSize = val
            this.$refs.list.clearSelection();
        },
        getActiveItem() {
            let items = this.$refs.list.getActiveItem()
            return items.length === 1 ? items[0] : items.length === 0 ? null : items
        },
        handelAddTemplate(type) {
            if(this.queryData.folderId == '0') {
                return this.$message.error('请选择目录')
            }
            this.rowID = 0
            this.pageType = '1'
            this.showNewsDiyDialog = true
        },
        handelEditNewsHome(row) {
            this.rowID = row.id
            this.pageType = '1'
            this.showNewsDiyDialog = true
        },
        async handelRemoveNewsHome(row) {
            const res = await this.$confirm('提示', '确定要删除吗？')
            if(res) {
                await NewsApi.deleteNewsPage({ id: row.id })
                this.$message.success('删除成功')
                this.doList({page:1})
            }
        },
        handelPreviewNewsHome(row) {
            this.rowID = row.id
            this.pageType = '1'
            this.showForm = false
            this.showAuditDialog = true
        },
        handleSearch(data) {
            this.queryData = {
                ...this.queryData,
                ...data
            }
            this.doList({page:1})
        },
        // 送审
        async handelAudit(row) {
            const res = await NewsApi.newsPageAudit({
                id: row.id,
                state: 0
            })
            if(res && res.code == 200) {
                this.$message.success('送审成功')
                this.doList({page:1})
            } else {
                this.$message.error('送审失败')
            }
        },
        handelShowAudit(row) {
            this.rowID = row.id
            this.pageType = '1'
            this.showForm = true
            this.showAuditDialog = true
        },
        // 送审
        async handelAuditPage(data) {
            const res = await NewsApi.newsPageAudit({
                id: data.id,
                reason: data.reason || '',
                state: data.state
            })
            if(res && res.code == 200) {
                this.$message.success('审核成功')
                this.doList({page:1})
                this.showAuditDialog = false
            } else {
                this.$message.error('审核失败')
            }
        },
        handelSetPassResult() {
            this.showNewsDiyDialog = true
            this.showSetPasswordDailog = false
        }
    }
}
</script>
